<template>
	<div>
		<sticky class-name="sub-navbar">
			<el-dropdown trigger="click">
				<el-button plain>
					Platform<i class="el-icon-caret-bottom el-icon--right"/>
				</el-button>
				<el-dropdown-menu class="no-border" slot="dropdown">
					<el-checkbox-group
							style="padding: 5px 15px"
							v-model="platforms"
					>
						<el-checkbox
								:key="item.key"
								:label="item.key"
								v-for="item in platformsOptions"
						>
							{{ item.name }}
						</el-checkbox>
					</el-checkbox-group>
				</el-dropdown-menu>
			</el-dropdown>

			<el-dropdown trigger="click">
				<el-button plain>
					Link<i class="el-icon-caret-bottom el-icon--right"/>
				</el-button>
				<el-dropdown-menu
						class="no-padding no-border"
						slot="dropdown"
						style="width: 300px"
				>
					<el-input
							placeholder="Please enter the content"
							v-model="url"
					>
						<template slot="prepend">Url</template>
					</el-input>
				</el-dropdown-menu>
			</el-dropdown>

			<div class="time-container">
				<el-date-picker
						:picker-options="pickerOptions"
						format="yyyy-MM-dd HH:mm:ss"
						placeholder="Release time"
						type="datetime"
						v-model="time"
				/>
			</div>

			<el-button style="margin-left: 10px" type="success"
			>publish
			</el-button>
		</sticky>

		<div class="components-container">
			<code>Sticky header, {{ $t('components.stickyTips') }}</code>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
			<div>placeholder</div>
		</div>
	</div>
</template>

<script>
	import Sticky from '@/components/Sticky';

	export default {
		name: 'StickyDemo',
		components: {Sticky},
		data() {
			return {
				time: '',
				url: '',
				platforms: ['a-platform'],
				platformsOptions: [
					{key: 'a-platform', name: 'platformA'},
					{key: 'b-platform', name: 'platformB'},
					{key: 'c-platform', name: 'platformC'},
				],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
			};
		},
	};
</script>

<style scoped>
	.components-container div {
		margin: 10px;
	}

	.time-container {
		display: inline-block;
	}
</style>
